<template>
  <div>
    <div v-if="isShow" class="showloading"><van-loading type="spinner" /></div>
    <div v-else>
      <van-cell-group v-for="data in dl" :key="data.opt_id" center>
        <van-cell :value="data.opt_name" />
        <van-grid :column-num="3" square>
          <van-grid-item v-for="item in data.children" :key="item.opt_id"
          :url="item.link_url"
           class="gaid-self">
            <van-image :src="item.image_url" />
            <div class="font-name">{{item.opt_name}}</div>
          </van-grid-item>
        </van-grid>
      </van-cell-group>
      <!-- 商品列表 -->

      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">按钮</van-button>
          <van-button size="mini">按钮</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Grid, GridItem, Cell, CellGroup, Card, Tag,Loading } from "vant";
import http from "@/util/http";
import gaid from "./gaid";

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Card);
Vue.use(Tag);
Vue.use(Loading);
export default {
  props: {
    path: String,
  },
  /**
   * 记录请求过的数据pathlist
   * dl 记录小列表数据
   * predl 记录列表
   *
   */
  data() {
    return {
      dl: [],
      predl: [],
    };
  },
  components: {
    gaid,
  },
  mounted() {
    this.changePath();
  },
  computed: {
    isShow() {
      if (this.dl.length) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    changePath() {
      let _path = this.path;
      //  数据未请求到
      let _this = this;
      if (_path == undefined) {
        http.get("baihuo").then((res) => {
          this.dl.push(...res.data.children);
          // console.log(this.dl, res.data, "dl");
        });
        http.get("baihuolist").then((res) => {
          this.predl = res.data;
          // console.log(this.predl, "re","pred");
        });
      } else {
        http.get(_path).then((res) => {
          this.dl.push(...res.data.children);
        });
        http.get(`${_path}list`).then((res) => {
          this.predl = res.data;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.showloading{
  height: 300px;
  text-align: center;
  display: flex;
  justify-content: center;
      align-items: center;

}
.gaid-self {
  height: 125px;
}
.font-name {
  white-space: nowrap;
  // overflow: hidden;
}
</style>